<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chart.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        let myChart=document.getElementById('myChart').getContext('2d');

        //配置全局默认信息
        Chart.defaults.global.defaultFontFamily = 'Lato';
        Chart.defaults.global.defaultFontSize = 18;
        Chart.defaults.global.defaultFontColor = '#777';

        //实例化对象
        let chart=new Chart(myChart,{
            //图形样式
            type:'bar',
            data:{
                //x轴数据
                labels:['北京','深圳','广州','上海','杭州','成都'],
                //设置具体数据
                datasets:[{
                    //标签
                    label:'工作热度值',
                    //数据
                    data:[689741,184235,153346,102634,103564,95301],
                    //背景颜色
                    backgroundColor:[
                        'rgba(255,99,132,0.6)',
                        'rgba(54,162,235,0.6)',
                        'rgba(255,206,86,0.6)',
                        'rgba(75,192,192,0.6)',
                        'rgba(153,102,255,0.6)',
                        'rgba(255,159,64,0.6)',
                    ],
                    //添加边框
                    borderWidth:1,
                    borderColor:'#777',
                    hoverBorderWidth:3,
                    hoverBorderColor:'#000'
                }]
            },
            //基本图完成，之后设置选项
            options:{
                title:{
                    display:true,
                    text:'中国各大城市工作热度值',
                    fontSize:25
                },
                legend:{
                    display:true,
                    position:'right',
                    labels:{
                        fontColor:'#000',
                        fontSize:20
                    }
                },
                layout:{
                    padding:{left:50,right:0,bottom:0,top:0}
                },
                tooltips:{
                    enabled:true
                }
            }
        })
    </script>
</body>
</html>